<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            font-size: 28px;
        }
    </style>
</head>

<body>

    <div id="container">

    </div>

    <div>
        <button type="button" id="btnAdd">添加子节点</button>
    </div>


    <script>
        const containerEl = document.getElementById('container');
        // 观察器的配置（需要观察什么变动）
        const config = { attributes: true, childList: true, subtree: true };

        // 当观察到变动时执行的回调函数
        const callback = function (mutationsList, observer) {
            // Use traditional 'for loops' for IE 11
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    console.log(`A child node has been added or removed. ${performance.now()}`);
                }
                else if (mutation.type === 'attributes') {
                    console.log('The ' + mutation.attributeName + ' attribute was modified.');
                }
            }
        };
        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(callback);
        // 以上述配置开始观察目标节点
        observer.observe(containerEl, config);

        btnAdd.onclick = function () {
            setTimeout(function () {
                console.log("setTimeout callback:", performance.now());
            });
            containerEl.append(`added node: ${performance.now()}`);
        }


    </script>

</body>

</html>